<template>
  <div class="user-list-container">
    <el-card>
        <div slot="header" class="clearfix">
            <span>博客列表</span>
            <el-button type="primary" @click="handleAdd" class="add-btn"><i class="el-icon-plus"></i> 新增博客</el-button>
        </div>
        <!-- 搜索和筛选区域 -->
        <div class="search-filter">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="博客名称">
                    <el-input v-model="searchForm.title" placeholder="请输入博客名称" />
                </el-form-item>
                <el-form-item label="博客类型">
                    <el-select v-model="searchForm.type" placeholder="请选择博客类型" clearable>
                        <el-option v-for="item in typesList" :key="item.value" :label="item.name" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 用户表格 -->
        <el-table v-loading="loading" :data="userList" style="width: 100%;">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column label="ID" prop="_id" width="360" />
            <el-table-column label="博客标题" prop="title" />
            <el-table-column label="博客类型" prop="typeName" />
            <el-table-column label="查看" prop="views" />
            <el-table-column label="点赞" prop="likes" />
            <el-table-column label="评论" prop="comments" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <BlogAdd ref="BlogAdd" @initTable="handleSearch" />
  </div>
</template>

<script>
import { blogTypesList,blogList,blogDel } from '@/api/api'
import BlogAdd from '@/views/blog/BlogAdd.vue'
export default {
    name: 'BlogList',
    components: {
        BlogAdd 
    },
    data () {
        return {
            userList: [],
            userListData: [],
            searchForm: {
                title: '',
                type: ''
            },
            typesList: [],
            loading: false,
            pagination: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
        }
    },
    mounted () {
        this.getUsers();
        this.typeBtn();
    },
    methods: {
        typeBtn() {
            blogTypesList().then(res => {
                if (res.errCode == 0) {
                    this.typesList = res.data || []
                } else {
                    this.$message.error(res.errMsg)
                }
            })
        },
        handleRefresh () {
            this.pagination.currentPage = 1;
            this.getUsers()
        },
        handleSearch() {
            this.pagination.currentPage = 1;
            this.getUsers()
        },
        getUsers() {
            this.loading = true
            blogList({
                title: this.searchForm.title,
                type: this.searchForm.type,
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.pageSize
            }).then(res => {
                if (res.errCode == 0) {
                    this.userList = res.data.list || []
                    this.userList.forEach(item => {
                        item.createdAt = this.$dateBtn(item.createdAt)
                        item.updatedAt = this.$dateBtn(item.updatedAt)
                    })
                } else {
                    this.$message.error(res.errMsg)
                }
                // this.pagination.total = res.page.total || 0
                this.loading = false
            }).catch(error => {
                console.error('获取用户列表失败:', error)
                this.loading = false
                this.$message.error('获取用户列表失败，请稍后重试')
            })
        },
        handleAdd () {
            this.$refs.BlogAdd.openDialog();
        },
        handleEdit (row) {
            this.$refs.BlogAdd.openDialog(row);
        },
        handleDelete (row) {
            this.$confirm('确定删除该博客吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                blogDel({_id: row._id}).then(response => {
                    this.$message.success('删除成功');
                    this.handleSearch();
                }).catch(error => {
                    console.error('删除用户失败:', error);
                    this.$message.error('删除用户失败，请稍后重试');
                });
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.user-list-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.el-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.add-btn {
  float: right;
}

.search-filter {
  margin: 15px 0;
  padding: 10px;
  background: #fafafa;
  border-radius: 6px;
}

.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.el-table {
  flex: 1;
  overflow: auto;
}
</style>
